<template>
 <button class="btn btn-outline-primary" @click="dialogVisible=true">添加公告</button>
 <el-dialog
          v-model="dialogVisible"
          title="添加公告"
          width="500"
        >
        <el-input
          v-model="notice.notice_content"
          style="width:100%"
          :autosize="{ minRows: 3, maxRows: 4 }"
          type="textarea"
          placeholder="请输入"
        />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addNoticeInChatroom">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
    <div class="row container mt-3">
      <div class="col-6 border">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">序号</th>
              <th scope="col">公告内容</th>
              <th scope="col">发布时间</th>
            </tr>
          </thead>
            <tbody>
            <tr v-for="(item,index) in noticeList" :key="index" @click="getNoticeUserList(item.notice_id)">
              <th scope="row">{{ index+1 }}</th>
              <td>{{ item.notice_content }}</td>
              <td>{{ item.publish_time }}</td>
            </tr>
            </tbody>
        </table>
      </div>
      <div class="col-6 border">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">序号</th>
              <th scope="col">用户id</th>
              <th scope="col">是否已读</th>
            </tr>
          </thead>
            <tbody v-if="noticeUserList">
            <tr v-for="(item,index) in noticeUserList" :key="index">
              <th scope="row">{{ index+1 }}</th>
              <td>{{ item.user_id }}</td>
              <td>{{ item.is_read==true?"已读":"未读" }}</td>
            </tr>
            </tbody>
        </table>
      </div>
    </div>
</template>
<script setup>
import { ref,reactive } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

//获取1000聊天室的所有公告
const findAllNotice=async()=>{
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/getChatroomNotice",
    params:{
      chatroom_id:"1000"
    }
  })
  return result.data
}
const noticeList=ref(await findAllNotice())
//添加公告
const dialogVisible = ref(false)
let notice=reactive({
  notice_id:"",
  notice_content:"",
  publisher_id:202011070103,
  publish_time:"",
  chatroom_id:"1000"
})
//点击添加公告
 async function addNoticeInChatroom(){
  let isSuccess=await axios.post("http://localhost:8080/addNoticeInChatroom",notice)
  if(isSuccess){
    ElMessage({
      type:'success',
      message:"新的公告发布成功！"
    })
  }
  noticeList.value=await findAllNotice()
  dialogVisible.value = false
  //重新给填写的公告赋值
  notice.notice_content=""
}

const noticeUserList=ref([])
const getNoticeUserList=async (notice_id)=>{
  let result=await axios({
    method:"get",
    url:"http://localhost:8080/getAllNoticeUser",
    params:{
      notice_id:notice_id
    }
  })
  noticeUserList.value=result.data
}
</script>

<style scoped>

</style>